<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            background-color: #ccc;
            color: white;
            text-align: center;
            font-size: 50px;
        }
    </style>
</head>

<body>
    <!-- 防抖 ： 在单位时间内，频繁触发事件，只执行最后一次 -->
    <div class="box"></div>
</body>

</html>
<script>
    let i = 0
    // document.querySelector('.box').addEventListener('mousemove',function(){
    //     i++
    //     this.innerHTML = i
    // })

    // 简化代码
    function moveFn() {
        i++
        this.innerHTML = i
        console.log(this)
    }
    // document.querySelector('.box').addEventListener('mousemove',moveFn);


/**
 * func  防抖函数
 * delay 延迟的时间
 * timerId 存储计时器的标识
 **/
    function debounce(func, delay) {
        let timerId;

        // 防抖逻辑:
        //  这个函数会不断地触发
        // return function () {
        //     console.log(this) // <div class="box"></div>
        //     const context = this;
        //     const args = arguments;// 参数

        //     clearTimeout(timerId); //在每次调用闭包函数时，先清除之前设置的计时器，以确保只有最后一次调用会执行函数

        //     timerId = setTimeout(function () {
        //         func.apply(context, args);
        //     }, delay);
        // };\
         

        // 优化：
        //  这个函数会不断地触发
        return function(){
             clearTimeout(timerId)
             timerId = setTimeout(() =>{
                func.call(this)
             },delay)
        } 
    }
    document.querySelector('.box').addEventListener('mousemove', debounce(moveFn, 500));
    /**
     * 防抖函数： 只要有定时器就要清楚定时器后再开启
     * 通常使用在： 搜索框输入、手机号，邮箱验证输入检测
     * **/
</script>